<script setup lang="ts">
import { Message } from '@arco-design/web-vue'
import { TimeTemplateApi } from '@/apis'
import { useTable } from '@/hooks'
import { useUserStore } from '@/stores'
import type { TableInstanceColumns } from '@/components/ProTable/type'

const userStore = useUserStore()

const {
  tableData,
  loading,
  pagination,
  search,
  handleDelete,
} = useTable(() => TimeTemplateApi.getList())

const columns: TableInstanceColumns[] = [
  {
    title: '序号',
    width: 66,
    align: 'center',
    fixed: 'left',
    render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
  },
  { title: '名称', dataIndex: 'name', slotName: 'name' },
  { title: '开始时间', dataIndex: 'startTime', slotName: 'startTime' },
  { title: '结束时间', dataIndex: 'endTime', slotName: 'endTime' },
  {
    title: '操作',
    slotName: 'action',
    width: 160,
    align: 'center',
    fixed: 'right',
    show: userStore.hasPermission(['education:timeTemplate:write']),
  },
]

const onCreate = () => {
  const newData = {
    id: '',
    name: '',
    startTime: '',
    endTime: '',
    isEditMode: true,
  }
  tableData.value.push(newData)
}

const onSave = async (item) => {
  if (!item.name) {
    item.name = `${item.startTime}-${item.endTime}`
  }
  if (item.id === '') {
    await TimeTemplateApi.create(item)
    Message.success('添加成功')
  } else {
    await TimeTemplateApi.update(item, item.id)
    Message.success('修改成功')
  }
  search()
}

const onDelete = (item, index) => {
  if (!item.id) {
    tableData.value.splice(index, 1)
  } else {
    return handleDelete(() => TimeTemplateApi.remove(item.id), {
      content: `是否确定删除[${item.name}]?`,
      showModal: true,
    })
  }
}
</script>

<template>
  <ProTable
    :loading="loading"
    :data="tableData"
    :columns="columns"
    :pagination="pagination"
    @refresh="search"
  >
    <template #toolbar-right>
      <a-button v-permission="['system:biz-rule:manage']" type="primary" @click="onCreate">
        <template #icon>
          <icon-plus />
        </template>
        <span>新增时段</span>
      </a-button>
    </template>
    <template #name="{ record }">
      <a-input v-if="record.isEditMode" v-model="record.name" />
      <span v-else> {{ record.name }}</span>
    </template>

    <template #startTime="{ record }">
      <a-time-picker v-if="record.isEditMode" v-model="record.startTime" format="HH:mm" :step="{ minute: 5 }" />
      <span v-else> {{ record.startTime }}</span>
    </template>
    <template #endTime="{ record }">
      <a-time-picker v-if="record.isEditMode" v-model="record.endTime" format="HH:mm" :step="{ minute: 5 }" />
      <span v-else> {{ record.endTime }}</span>
    </template>
    <template #action="{ record, rowIndex }">
      <a-space>
        <a-link v-if="record.isEditMode" v-permission="['system:biz-rule:manage']" @click.stop="onSave(record)">
          保存
        </a-link>
        <a-link v-else v-permission="['system:biz-rule:manage']" @click.stop="record.isEditMode = true">
          编辑
        </a-link>
        <a-link v-permission="['system:biz-rule:manage']" status="danger" @click.stop="onDelete(record, rowIndex)">
          删除
        </a-link>
      </a-space>
    </template>
  </ProTable>
</template>

<style scoped>

</style>
